<template>
    <a-form @keypress.enter="handleSearch">
        <flexbox wrap="wrap">
            <flexbox class="margin-b-16 margin-r-16">
                <span>年份：</span>
                <HYearPickerCell :allowClear="false" v-model:value="form.year" class="margin-l-8" />
            </flexbox>

            <flexbox class="margin-b-16" justify="flex-end" style="flex: 1">
                <a-button type="primary" @click="handleSearch">查询</a-button>
                <a-button class="margin-l-8" @click="handleReset">重置</a-button>
            </flexbox>
        </flexbox>
    </a-form>
</template>

<script lang="ts">
import { HYearPickerCell } from '@/components';
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
    components: {
        HYearPickerCell
    },
    emits: ['change'],
    setup(_, { emit }) {
        const state = reactive<any>({
            form: {
                year: null
            }
        });
        const handleSearch = () => {
            emit('change', {
                ...state.form
            });
        };
        const handleReset = () => {
            state.form = {
                year: null
            };
            handleSearch();
        };
        return {
            ...toRefs(state),
            handleSearch,
            handleReset
        };
    }
});
</script>

<style scoped lang="less">
::v-deep(.ant-select-selector) {
    height: 31px !important;
}
</style>